Can you apply a transition to an element’s pseudo-class (like :hover)?
Applying Transitions to Pseudo-classes in CSS
Yes, you can apply transitions to an element’s pseudo-class such as :hover, :focus, or :active. In fact, transitions are most commonly used with these pseudo-classes to create smooth interactive effects when an element changes state.
The transition is declared on the base (default) state of the element, not inside the pseudo-class. This ensures the browser knows how to animate from the initial to the new state when the pseudo-class is triggered.
In this example, the button smoothly changes its background color and scales up slightly when hovered, thanks to the transition defined in the default state.
- 1
:hover— triggered when the user moves the mouse over an element. - 2
:focus— triggered when an element receives keyboard or programmatic focus. - 3
:active— triggered when an element is clicked or pressed. - 4
:checked— triggered when checkboxes or radio buttons are selected.
When the input field gains focus, its border color transitions smoothly from gray to blue.
- 1
Declare the
transitionon the base element, not the pseudo-class. - 2
Pseudo-classes like
:hover,:focus, and:activeare ideal for interactive transitions. - 3
You can transition multiple properties (like color, transform, or opacity) at once.